<template>
  <!-- 外层盒子 -->
  <div class="wrap">
    <p class="text" v-if="title">{{ title }}</p>
    <div class="ultitle">
      <div v-for="item in getData" :key="item.name" :title="item.name">
        {{ item.name }}
      </div>
    </div>
    <!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->
    <happy-scroll
      color="#04bbdd"
      :size="6"
      resize
      hide-horizontal
      style="width: 100%"
      v-if="getList.length"
    >
      <!-- 内层盒子——内容区 -->
      <div class="con">
        <ul class="contentul">
          <li
            v-for="(item, inx) in getList"
            :key="item.id"
            :class="inx % 2 == 0 ? 'c0a396f' : 'c1b68ba'"
            v-if="getList.length"
            @click="changeItem(item)"
          >
            <!--  <p :title="item.car_number">{{ item.getData[0][deindex] }}</p>
            <p style="text-align: center" :title="item.type_name">{{ item.type_name }}</p>
            <p style="text-align: center" :title="item.bayonet">{{ item.bayonet }}</p>
            <p style="text-align: center">{{ item.status ? "入园" : "出园" }}</p>
            <p style="text-align: center" :title="item.create_time">
              {{ item.create_time.substring(11) }}
            </p>-->
            <p v-for="(it, i) in getData" :key="it.name">
              <span v-if="it.callBack" :title="it.callBack(item, inx)">
                {{ it.callBack(item, inx) }}</span
              >
              <span v-else-if="it.deindex == 'status' && !it.text">
                {{ item[it.deindex] ? "入园" : "出园" }}</span
              >
              <span v-else-if="it.deindex == 'status' && it.text">
                {{ item[it.deindex] ? "在线" : "离线" }}</span
              >
              <span
                v-else-if="it.deindex == 'create_time' || it.deindex == 'alarm_time'"
                :title="item[it.deindex]"
              >
                {{ item[it.deindex].substring(11) }}</span
              >

              <span v-else :title="item[it.deindex]">{{ item[it.deindex] }}</span>
            </p>
          </li>
          <li
            style="width: 100%; background: #0a396f"
            @click="loadingMore"
            v-if="loadstatus"
          >
            <p style="width: 100%; text-align: center; font-size: 14px">点击加载更多</p>
          </li>
        </ul>
      </div>
    </happy-scroll>
    <p
      v-else
      style="
        text-align: center;
        font-size: 1vw;
        font-weight: bold;
        color: #fff;
        padding-top: 1vw;
      "
    >
      暂无数据
    </p>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
    },
    topData: {
      type: Array,
    },
    title: {
      type: String,
    },
    loadstatus: {
      type: Boolean,
      default: function () {
        return true;
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 加载更多
    loadingMore() {
      this.$emit("loadingMore");
    },
    changeItem(item) {
      this.$emit("choseItem", item);
    },
  },
  computed: {
    getList() {
      // var list = [];
      // this.list.length &&
      //   this.topData.map((item) => {
      //     this.list.map((it) => {
      //       if (it[item.deindex] != undefined) {
      //         list.push({
      //           name: it[item.deindex],
      //           id: it.id,
      //         });
      //       }
      //     });
      //   });

      return this.list;
    },
    getData() {
      return this.topData;
    },
  },
};
</script>
<style lang="less" scoped>
.ultitle {
  background: #04bbdd;
  height: 0.755vw;
  line-height: 0.755vw;
  padding: 0.208vw 0.208vw;
  display: flex;
  width: 96%;
  color: #fff;
}

.ultitle > div {
  width: 100%;
  font-size: 0.6vw;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.con {
  width: 100%;
  height: auto;
}
.contentul {
  /* padding-top:34px; padding-left:10px;
   padding-right:10px;*/
  width: 100%;
  display: block;
}

.contentul > li > p {
  flex: 1;
  color: #fff;
  font-size: 0.45vw;
}

/deep/.happy-scroll-container .happy-scroll-content {
  display: inline-block;
  width: 94%;
}
.text {
  color: #fff;
  padding: 0 0 0.417vw 0;
  font-size: 23px;
}

.con {
  width: 100%;
}
.contentul {
  /* padding-top:34px; padding-left:10px;
   padding-right:10px;*/
  padding-bottom: 32px;
}
.contentul > li {
  height: 0.755vw;
  line-height: 0.755vw;
  display: flex;

  padding: 0.26vw 0.26vw;
  margin-bottom: 0.026vw;
  cursor: pointer;
}
.c0a396f {
  background: #0a396f;
}
.c1b68ba {
  background: #227bd7;
}
.contentul > li > p {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.contentul > li:hover {
  background: rgb(44, 118, 217);
}
</style>
